<template>
  <view class="tree-node">
    <view
      @click="toggleChildren(node)"
      class="node-label"
      :class="isSelected ? 'checkbox-active' : ''"
    >
      <!--  v-if="!node.children || !node.children.length" -->
      <view style="display: flex; flex-direction: row">
        <!-- <view class="node-checkbox-container">
          <view class="">
            <uni-icons
              v-if="node.children && node.children.length"
              :type="isOpen ? 'arrowdown' : 'arrowright'"
              size="16"
            ></uni-icons>
            <view v-else style="width: 34rpx"> </view>
          </view>
        </view> -->
        <text style="padding-left: 10rpx">{{ node.label }}</text>
      </view>
      <!--  class="checkbox" -->
      <view @click="checkedAll(node)">
        <uni-icons
          v-if="isSelected"
          type="checkmarkempty"
          color="#30B3AB"
          size="16"
        ></uni-icons>
      </view>
    </view>
    <view
      v-if="isOpen && node.children && node.children.length"
      class="children"
    >
      <tree-node
        v-for="child in node.children"
        :key="child.id"
        :node="child"
        :selectedIds="selectedIds"
        @select="handleSelect"
        :multiple="multiple"
      ></tree-node>
    </view>
  </view>
</template>

<script>
export default {
  name: "TreeNode",
  props: {
    node: {
      type: Object,
      required: true,
    },
    selectedIds: {
      type: [Array, String, Number],
    },
    multiple: {
      type: Boolean,
      default: false,
      isChecked: false,
    },
    isOpen: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {};
  },
  computed: {
    isSelected() {
      console.log(this.node, "大师傅===", this.selectedIds);
      if (this.multiple) {
        return this.selectedIds.includes(this.node.id);
      } else {
        return this.selectedIds === this.node.id;
      }
    },
  },
  methods: {
    checkedAll(node) {
      if (node.children && node.children.length) {
        const selectedIdsSet = new Set(this.selectedIds);
        this.collectAllIds(node, selectedIdsSet);
        const newSelectedIds = Array.from(selectedIdsSet);
        console.log(newSelectedIds, "获取到全选中-----");
        this.isOpen = true;
        this.$emit("select", { ...node, selectedIds: newSelectedIds });
      }
    },
    collectAllIds(node, selectedIdsSet) {
      if (node.id) {
        selectedIdsSet.add(node.id);
      }
      if (node.children && node.children.length) {
        node.children.forEach((child) =>
          this.collectAllIds(child, selectedIdsSet)
        );
      }
    },
    toggleChildren(node) {
      if (this.node.children && this.node.children.length) {
        //this.isOpen = !this.isOpen;
      } else {
        this.handleSelect(node);
      }
    },
    handleSelect(node) {
      if (this.multiple) {
        let updatedSelectedIds = [...this.selectedIds.map(String)];
        if (!this.isSelected) {
          if (!updatedSelectedIds.includes(String(node.id))) {
            updatedSelectedIds.push(String(node.id));
          }
        } else {
          updatedSelectedIds = updatedSelectedIds.filter(
            (id) => id !== String(node.id)
          );
        }
      }

      this.$emit("select", node);
    },
  },
};
</script>

<style  lang="scss" scoped>
@function pxtovw($px) {
  @return #{$px / 20 * 1}vw;
}
.tree-node {
  padding: pxtovw(5) pxtovw(0) pxtovw(5) pxtovw(10);
  cursor: pointer;
}

.node-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: pxtovw(32);
}

.node-checkbox-container {
  display: flex;
  align-items: center;

  /* margin-left: 20rpx; */
}

.node-checkbox-label {
  margin-left: pxtovw(10);
}

.children {
  margin-left: pxtovw(20);
}
.checkbox {
  width: pxtovw(38);
  height: pxtovw(38);
  border: pxtovw(1) solid #dcdfe6;
  border-radius: pxtovw(8);
  background-color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: pxtovw(6);
}
.checkbox-active {
  /*  border-color: #2979ff; */
  color: #30b3ab;
  /* background-color: #2979ff; */
  margin-right: pxtovw(34);
}
</style>
